<template>
  <div class="container_home">
    <p>Home</p>
    <div
      class="tabs"
      v-navActive="{
        className: 'selected',
        activeClass: 'tab',
        selectedIndex
      }"
    >
      <div class="tab" v-for="(it,index) in item" :key="index" @click="change(index)">{{ it }}</div>
    </div>
  </div>
  <!-- :class="{ 'selected': index === selectedIndex }" -->
</template>



<script>
import navActive from "../directives/navActive";


export default {
  directives: {
    navActive
  },
  data() {
    return {
      item: ['item1', 'item2', 'item3', 'item4'],
      selectedIndex: -1,
    }
  },
  methods: {
    change(_index_) {
      // console.log(_index_);
      this.selectedIndex = _index_;
    }
  }
};
</script>

<style lang='scss' scoped>
.tabs {
  display: flex;
  margin-left: 1px;
}
.tab {
  padding: 10px;
  border: 1px solid black;
  transition: all 0.4s;

  margin-left: -1px;

  z-index: 1;
}
.selected {
  color: white;
  background-color: #000;

  z-index: 10;
  border: 1px solid rgb(0, 255, 51);
}
</style>